<template>
  <view class="container">
    <view class="head">
      <image src="/static/taotaitupian/xianxiabanner.png" mode=""></image>
      <view class="head_content">
        <view class="head_content_t">
          线下活动名称
        </view>
        <view class="head_content_des ellipsis2">
          这里为活动的描述，这里为活动的描述这里为活动的描述线下活动名称
        </view>
        <view class="head_content_price">
          <text>￥</text>
          <view>666</view>
        </view>
      </view>
    </view>
    <view class="user">
      <view class="user_box">
        <view>姓名：张三</view>
        <text>18965410000</text>
      </view>
      <view class="user_box">
        <view>姓名：张三</view>
        <text>18965410000</text>
      </view>
    </view>
    <view class="tips">
      <view class="tips_t">
        退款说明
      </view>
      <view class="tips_b">
        不接受退款，由于本项活动资源需要提前购买...不接受退款，由于本项活动资源需要提前购买...
      </view>
    </view>
    <view class="footer_fixed">
      <view class="footer_left">
        <text>合计金额：</text>
        <view>
          <text>￥</text>
          <view>666</view>
        </view>
      </view>
      <view class="footer_right flex-center" @tap="gotoUrl">
        去支付
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const gotoUrl = () => {
    uni.navigateTo({
      url: '../ticketRoll/ticketRoll'
    })
  }
  const popupRef = ref()
  const open = () => {
    popupRef.value.open();
  }
  const change = (e) => {
    console.log('弹窗状态改变：', e);
  }
</script>

<style scoped lang="less">
  .container {
    height: 100%;
    background-color: #f4f4f4;
  }

  .head {
    width: 750rpx;
    height: 232rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;

    image {
      width: 240rpx;
      height: 170rpx;
      background: #999999;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }

    &_content {
      flex: 1;
      display: flex;
      flex-direction: column;

      &_t {
        font-weight: bold;
        font-size: 30rpx;
        color: #333333;
      }

      &_des {
        font-size: 24rpx;
        color: #666666;
        margin-bottom: 18rpx;
      }

      &_price {
        display: flex;
        align-items: flex-end;
        font-weight: bold;
        font-size: 24rpx;
        color: #FA4058;

        text {}

        view {
          font-size: 32rpx;
          margin-bottom: -5rpx;
        }
      }
    }
  }

  .user_box {
    width: 750rpx;
    height: 90rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #333333;
    padding: 0 30rpx;
    border-bottom: 1rpx solid rgba(#000, .1);

    text {
      color: #666666;
    }

    &:last-child {
      border-bottom: 0 !important;
    }

  }



  .tips {
    background-color: #fff;
    padding: 30rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    &_t {
      font-weight: bold;
      font-size: 30rpx;
      color: #333333;
      margin-bottom: 30rpx;
    }

    &_b {
      font-size: 28rpx;
      color: #666666;
    }
  }


  .footer_fixed {
    width: 750rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
  }

  .footer_left {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 24rpx;
    color: #333333;

    >view {
      display: flex;
      align-items: center;
      color: #FA4058;

      >view {
        font-size: 32rpx;
      }
    }
  }

  .footer_right {
    width: 240rpx;
    height: 68rpx;
    background: #218CFE;
    border-radius: 34rpx;
    font-size: 28rpx;
    color: #FFFFFF;
  }
</style>